<script setup>
import { ref, reactive } from "vue"
import {useRouter} from "vue-router"
import {ElMessage} from "element-plus"
import {login} from "@/api/user"
const loginRef = ref()

const router = useRouter()

const ruleForm = reactive({
  username: "",
  pwd: ""
})
const validUsername = (rule, value, callback) => {
  const reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/

  if (value == '') {
    callback(new Error("请输入邮箱"))
  }
  else if (!reg.test(value)) {
    callback(new Error("输入的正确的邮箱"))
  } else {
    callback();
  }
}

const validPass = (rule, value, callback) => {
  const reg = /^[0-9a-zA-Z]{3,20}/
  if (value == '') {
    callback(new Error("请输入密码"))
  }
  else if (!reg.test(value)) {
    callback(new Error("输入的密码由0-9的数字以及26个大小写字母构成，长度为3-20位"))
  } else {
    callback();
  }
}
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { validator: validUsername, trigger: 'blur' }
  ],
  pwd: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { validator: validPass, trigger: 'blur' }
  ]
}

const doLogin = (formEl) => {
  formEl.validate(valid => {
    if(valid) {
      login(ruleForm).then(res => {
        
        
      }).catch(ex => {
        
        if(ex.status == 400) {
          ElMessage.error("用户名不存在")
        } else if(ex.status == 401) {
          ElMessage.error("密码错误")
        }
        
      })
    } else {
      ElMessage.error("表单验证失败，请输入内容")
    }
  })
}

</script>
<template>
    <el-container>
        <el-main class="login_main">
            <div class="login_left">
              <div class="login_form">
                <h1 style="font-size: 38px;">登录</h1>
                <p style="margin-bottom: 40px; margin-top: 10px;">很高兴再次见到您！</p>
              
                <el-form ref="loginRef" :model="ruleForm" status-icon :rules="rules" label-width="auto" label-position="top">
                    <el-form-item label="邮箱" prop="username">
                        <el-input v-model="ruleForm.username"/>
                    </el-form-item>
                    <el-form-item label="密码" prop="pwd">
                        <el-input v-model="ruleForm.pwd" type="password"/>
                    </el-form-item>
                    <div style="margin: 20px 0;">
                      <el-checkbox>记住我</el-checkbox>
                    </div>
                    <div style="margin: 10px 0;">
                      没有帐户？<el-link type="primary" @click="router.push({path: '/register'})">注册</el-link>
                    </div>
                    <el-form-item>
                        <el-button style="width: 100%;" type="primary" @click="doLogin(loginRef)">登录</el-button>
                    </el-form-item>
                </el-form>
              </div>
            </div>
            <div class="login_right">

            </div>
        </el-main>
    </el-container>
</template>
<style scoped>
.login_main {
    display: flex;
    padding: 0;
    margin: 0;
}

.login_left {
    height: 100vh;
    width: 40%;
}

.login_right {
    width: 60%;
    background: url("@/assets/login-background.53821b0f.svg") no-repeat;
    background-size: cover;
}

.login_form {
  width: 60%;
  margin: auto;
  margin-top: 30%;
}

</style>